/* 1280x1650 page */
/*
Header - 60 px
Title - 360px
Intro - 350 px
Products - 360 px
Contacts - 320 px
About - 160 px
Footer - 40 px
*/

body.light {

    header {
        /* Set where in the grid this section will be,
        set the font's family, size, weight, color, and text-transform, 
        then set the background color of the section. 
        Lastly, set the padding around and between the elements of the list.*/
        grid-area: Header;
        font-family: Arial;
        font-size: 20px;
        font-weight: bold;
        text-transform: uppercase;
        color: black;
        background-color: lightgrey;

        /* Padding around the list */
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 620px;

        li {
            display: inline;
            padding: 15px;
            /* Padding between the elements of the list */
        }
    }

    section.Title {
        grid-area: Title;
        background-color: #e2abb0;
        font-family: Helvetica;
        font-size: 28px;
        font-weight: bold;
        text-transform: uppercase;
        color: black;
        text-align: center;

        padding-top: 125px;
        padding-bottom: 0px;

        p {
            display: inline-block;
            width: 290px;
            height: 35px;
            background-color: white;
        }
    }

    section.Intro {
        grid-area: Intro;
        background-color: white;
        text-align: left;

        padding-top: 30px;
        padding-right: 640px;
        padding-bottom: 0px;
        padding-left: 60px;

        p.Subtitle {
            font-family: Verdana;
            font-size: 30px;
            color: #373737;
            padding-top: 0px;
            padding-bottom: 10px;
        }

        p.Content {
            font-family: Arial;
            font-size: 20px;
            color: #373737;
            word-spacing: 0.25em;
            line-height: 1.5;
        }
    }

    section.Products {
        grid-area: Products;
        background-color: #537abd;
        text-align: left;

        padding-top: 20px;
        padding-right: 150px;
        padding-bottom: 0px;
        padding-left: 640px;

        p.Subtitle {
            font-family: Verdana;
            font-size: 30px;
            color: white;
        }

        .Content {
            font-family: Arial;
            font-size: 20px;
            color: black;
            word-spacing: 0.25em;
            line-height: 1.5;
            padding-top: 10px;
        }

        #Track_Record {
            display: inline-block;
            height: 10px;
            width: 120px;
            padding-top: 0px;
            padding-bottom: 20px;
            padding-right: 0px;
            padding-left: 10px;
            background-color: white;
        }
    }

    section.Contacts {
        grid-area: Contacts;
        background-color: white;
        text-align: left;

        padding-top: 30px;
        padding-right: 640px;
        padding-bottom: 0px;
        padding-left: 60px;

        p.Subtitle {
            font-family: Verdana;
            font-size: 30px;
            color: #373737;
            padding-bottom: 10px;
        }

        p.Content {
            font-family: Arial;
            font-size: 20px;
            color: gray;
            word-spacing: 0.25em;
            line-height: 1.5;
        }
    }

    section.About {
        grid-area: About;
        font-family: Arial;
        font-size: 12px;
        text-transform: uppercase;
        color: white;
        background-color: #222222;

        padding-top: 25px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 70px;

        #List {
            display: grid;
            grid-template-rows: 20px 20px 20px 20px;
            grid-template-columns: 80px 120px 120px;
            column-gap: 40px;
            row-gap: 5px;
        }
    }

    footer {
        grid-area: Footer;
        font-family: Arial;
        font-size: 12px;
        color: white;
        background-color: black;
        text-align: center;
    }

    .Container {
        display: grid;
        grid-template-rows: 60px 360px 350px 360px 320px 160px 40px;
        grid-template-columns: 1280px;
        column-gap: 0px;
        row-gap: 0px;
        grid-template-areas:
            'Header'
            'Title'
            'Intro'
            'Products'
            'Contacts'
            'About'
            'Footer';
    }
}

body.dark {

    header {
        /* Set where in the grid this section will be,
    set the font's family, size, weight, color, and text-transform, 
    then set the background color of the section. 
    Lastly, set the padding around and between the elements of the list.*/
        grid-area: Header;
        font-family: Arial;
        font-size: 20px;
        font-weight: bold;
        text-transform: uppercase;
        color: white;
        background-color: rgb(34, 34, 34);

        /* Padding around the list */
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 620px;

        li {
            display: inline;
            padding: 15px;
            /* Padding between the elements of the list */
        }
    }

    section.Title {
        grid-area: Title;
        background-color: rgb(29, 84, 79);
        font-family: Helvetica;
        font-size: 28px;
        font-weight: bold;
        text-transform: uppercase;
        color: white;
        text-align: center;

        padding-top: 125px;
        padding-bottom: 0px;

        p {
            display: inline-block;
            width: 290px;
            height: 35px;
            background-color: black;
        }
    }

    section.Intro {
        grid-area: Intro;
        background-color: black;
        text-align: left;

        padding-top: 30px;
        padding-right: 640px;
        padding-bottom: 0px;
        padding-left: 60px;

        p.Subtitle {
            font-family: Verdana;
            font-size: 30px;
            color: rgb(200, 200, 200);
            padding-top: 0px;
            padding-bottom: 10px;
        }

        p.Content {
            font-family: Arial;
            font-size: 20px;
            color: rgb(200, 200, 200);
            word-spacing: 0.25em;
            line-height: 1.5;
        }
    }

    section.Products {
        grid-area: Products;
        background-color: rgb(172, 133, 66);
        text-align: left;

        padding-top: 20px;
        padding-right: 150px;
        padding-bottom: 0px;
        padding-left: 640px;

        p.Subtitle {
            font-family: Verdana;
            font-size: 30px;
            color: black;
        }

        .Content {
            font-family: Arial;
            font-size: 20px;
            color: white;
            word-spacing: 0.25em;
            line-height: 1.5;
            padding-top: 10px;
        }

        #Track_Record {
            display: inline-block;
            height: 10px;
            width: 120px;
            padding-top: 0px;
            padding-bottom: 20px;
            padding-right: 0px;
            padding-left: 10px;
            background-color: black;
        }
    }

    section.Contacts {
        grid-area: Contacts;
        background-color: black;
        text-align: left;

        padding-top: 30px;
        padding-right: 640px;
        padding-bottom: 0px;
        padding-left: 60px;

        p.Subtitle {
            font-family: Verdana;
            font-size: 30px;
            color: rgb(200, 200, 200);
            padding-bottom: 10px;
        }

        p.Content {
            font-family: Arial;
            font-size: 20px;
            color: rgb(127, 127, 127);
            word-spacing: 0.25em;
            line-height: 1.5;
        }
    }

    section.About {
        grid-area: About;
        font-family: Arial;
        font-size: 12px;
        text-transform: uppercase;
        color: black;
        background-color: rgb(221, 221, 221);

        padding-top: 25px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 70px;

        #List {
            display: grid;
            grid-template-rows: 20px 20px 20px 20px;
            grid-template-columns: 80px 120px 120px;
            column-gap: 40px;
            row-gap: 5px;
        }
    }

    footer {
        grid-area: Footer;
        font-family: Arial;
        font-size: 12px;
        color: black;
        background-color: white;
        text-align: center;
    }

    .Container {
        display: grid;
        grid-template-rows: 60px 360px 350px 360px 320px 160px 40px;
        grid-template-columns: 1280px;
        column-gap: 0px;
        row-gap: 0px;
        grid-template-areas:
            'Header'
            'Title'
            'Intro'
            'Products'
            'Contacts'
            'About'
            'Footer';
    }
}